<script lang="ts" setup>
function onClickLeft() {
    history.back()
}
import type { Ref } from 'vue';
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';

import { showToast } from 'vant';
const user = useUserStore()
console.log(1, user.userpsw);

const oldpsw: Ref<string> = ref('')//旧密码
oldpsw.value = user.userpsw
const newpsw1: Ref<string> = ref('')//新密码
const newpsw2: Ref<string> = ref('')//新密码
import { updatePswFn } from '@/api/login'
import router from '@/router';
/* function updatepswClick() {
    //点击修改密码的方法
    if (oldpsw.value !== newpsw1.value) {
        ///新旧密码不一样，可以修改
        if (newpsw1.value == newpsw2.value) {//两次输入新密码一致
            console.log(11);
            updatePswFn({userpsw:newpsw1.value}).then(res => {
                console.log(13,res);
                
                // 把数据提交
                user.changeUserState({
                    userpsw: newpsw1.value,
                    token: res.data.loginApi.token,
                    userid: res.data.loginApi.userid,
                    isLogin: true,
                    usertel,
                })
                console.log(12);
            })

        } else {
            showToast('两次输入的新密码不一致！请重新修改')
        }
    } else {
        showToast('新密码不能与原密码一致！')
    }
}
 */
 function updatepswClick() {
  // 点击修改密码的方法
  if (oldpsw.value !== newpsw1.value) {
    // 新密码与旧密码不同，可以修改
    if (newpsw1.value === newpsw2.value) { // 两次输入新密码一致
      console.log('开始修改密码...');
      updatePswFn({ userpsw: newpsw1.value }).then(res => {
        console.log('修改密码接口响应:', res);

        if (res.code == 200) {
          // 密码修改成功后更新 Pinia 状态
          user.changeUserState({
            userpsw: newpsw1.value,  // 更新密码
            token: res.data.updatepsw.token,
            userid: res.data.updatepsw.userid,
            isLogin: true,
            usertel: user.usertel,
            username:user.username
          });
 
          showToast('密码修改成功');
          router.push('/my')
        } else {
          // 接口返回错误
          showToast('密码修改失败，请重试');
        }
      }).catch(error => {
      
        showToast('密码修改请求失败');
      });
    } else {
      showToast('两次输入的新密码不一致！请重新修改');
    }
  } else {
    showToast('新密码不能与原密码一致！');
  }
}

</script>
<template>
    <div>
        <header>
            <van-nav-bar left-text="返回" title="更改密码" left-arrow @click-left="onClickLeft"> </van-nav-bar>
            <div class="vipbox">
                <div class="left">
                    <van-field v-model="oldpsw" type="password" name="输入初始密码" placeholder=" 输入初始密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />

                </div>

            </div>
            <div class="vipbox">
                <div class="left">
                    <van-field v-model="newpsw1" type="password" name="输入新密码" placeholder="输入新密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />

                </div>

            </div>
            <div class="vipbox">
                <div class="left">
                    <van-field v-model="newpsw2" type="password" name=" 再次输入新密码" placeholder="  再次输入新密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />

                </div>

            </div>
            <div class="updatepsw">
                <van-button type="primary" @click="updatepswClick">确定更改</van-button>
            </div>
        </header>
    </div>
</template>
<style lang="scss">
.vipbox {
    border-bottom: 1px solid #000;
    margin-left: 5vw;
    margin-right: 5vw;
    padding-bottom: 10px;
    margin: 20px auto;
    width: 90vw;
    display: flex;

    .left {
        width: 90vw;
        font-size: 20px;
        line-height: 44px;
    }


}

.updatepsw {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    .van-button {
        width: 90vw;
    }
}
</style>